<!DOCTYPE html >
<html style="height: 100%">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <td>学号：</td>
        <td><input type="text" name="txtName" id="sId" required/></td>
    </tr>
    <tr>
        <td>姓名：</td>
        <td><input type="text" name="txtTitle" id="sName" required/></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td><input type="text" name="txtWords" id="sSex" required/></td>
    </tr>
    <tr>
        <td>论文：</td>
        <td><input type="text" name="txtWords" id="sPaper" required/></td>
    </tr>

</table>
<input type="button" value="保存" id="btnSave"/>
<input type="button" value="查询" id="btnQuery"/>
<input type="button" value="修改" id="btnUpdate"/>
<input type="button" value="删除" id="btnDelete"/>
<hr/>
<input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
<table id="tblData">
</table>
</body>
<script type="text/javascript" src="../View/js/jquery.js"></script>
<script type="text/javascript" src="../View/js/database.js"></script>
<script type="text/javascript">
    /*function initDatabase() {
     var db = getCurrentDb();//初始化数据库
     console.log();
     if (!db) {
     alert("您的浏览器不支持HTML5本地数据库");
     return;
     }
     db.transaction(function (trans) {//启动一个事务，并设置回调函数
     //执行创建表的Sql脚本
     trans.executeSql("CREATE TABLE IF NOT EXISTS Demo(uName TEXT NULL,title TEXT NULL,words TEXT NULL)", [],
     function (trans, result) {},
     function (trans, message) {
     alert(message);
     });
     },
     function (trans, result) {},
     function (trans, message) {
     });
     }

     $(function () {//页面加载完成后绑定页面按钮的点击事件
     initDatabase();
     $("#btnSave").click(function () {
     var txtName = $("#txtName").val();
     var txtTitle = $("#txtTitle").val();
     var txtWords = $("#txtWords").val();
     var db = getCurrentDb();
     //执行sql脚本，插入数据
     db.transaction(function (trans) {
     trans.executeSql("INSERT INTO Demo(uName,title,words) VALUES(?,?,?) ",
     [txtName, txtTitle, txtWords], function (ts, data) {
     }, function (ts, message) {
     alert(message);
     });
     });
     showAllTheData();
     });
     });
     function getCurrentDb() {
     //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
     //如果数据库不存在那么创建之
     var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024);
     return db;
     }

     //显示所有数据库中的数据到页面上去
     function showAllTheData() {
     $("#tblData").empty();
     var db = getCurrentDb();
     db.transaction(function (trans) {
     trans.executeSql("SELECT * FROM Demo ", [], function (ts, data) {
     if (data) {
     for (var i = 0; i < data.rows.length; i++) {
     appendDataToTable(data.rows.item(i));//获取某行数据的json对象
     }
     }
     }, function (ts, message) {
     alert(message);
     var tst = message;
     });
     });
     }

     function appendDataToTable(data) {//将数据展示到表格里面
     //uName,title,words
     var txtName = data.uName;
     var txtTitle = data.title;
     var words = data.words;
     var strHtml = "";
     strHtml += "<tr>";
     strHtml += "<td>" + txtName + "</td>";
     strHtml += "<td>" + txtTitle + "</td>";
     strHtml += "<td>" + words + "</td>";
     strHtml += "</tr>";
     $("#tblData").append(strHtml);
     }*/

</script>
</html>